<template>
  <div class="video">
    <search-list
      :api-url="$url.AssetVideoList"
      :option="searchOpt"
      :itemPerRow="4"
      :before-query="beforeQuery"
      ref="videoSearchList"
      @selection-change="selectionChange"
      @row-click="rowClick"
    >
      <el-table-column type="selection" v-if="selectMode"></el-table-column>
      <el-table-column label="视频名称" prop="title" max-width="200"></el-table-column>
      <el-table-column label="视频信息" min-width="150">
        <template slot-scope="scope">
          <div class="cover-text">
            <img class="cover-img" v-if="scope.row.cover" :src="scope.row.cover" />
            <div>
              <!-- <p>标题: {{ scope.row.title }}</p> -->
              <p>ID: {{ scope.row.videoId }}</p>
              <p>ShowID: {{ scope.row.showVideoId }}</p>
              <p>所属合集: {{ scope.row.courseName }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="视频类别" prop="categoryName" max-width="150"></el-table-column>
      <el-table-column label="付费类型" prop="payMode" width="100px">
        <template slot-scope="scope">
          {{ $selectFormat['paySl'](scope.row.payMode).label }}
        </template>
      </el-table-column>
      <el-table-column label="是否上线/精编" prop="online" max-width="50">
        <template slot-scope="scope">
          <el-tag effect="dark" :type="['danger', 'success', 'info'][scope.row.online]">
            {{ $selectFormat['onlineSl'](scope.row.online).label }}
          </el-tag>
          <el-tag effect="dark" :type="['danger', 'success'][scope.row.precised]">
            {{ $selectFormat['precisedSl'](scope.row.precised).label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" max-width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" max-width="150px"></el-table-column>
      <el-table-column prop="nickname" label="讲师" width="80px"></el-table-column>
      <el-table-column label="操作" width="150px" v-if="!selectMode">
        <template slot-scope="scope">
          <div>
            <el-button type="text" v-permission="['video:check']" @click="check(scope.row)">
              去编辑
            </el-button>
            <el-button type="text" @click="show(scope.row)">
              预览
            </el-button>
            <el-button type="text" @click="addComment(scope.row)">评论</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              v-permission="['video:del']"
              @click="del(scope.row)"
            ></el-button>
          </div>
        </template>
      </el-table-column>

      <div slot="btn-after" class="btn-after">
        <el-button
          type="success"
          icon="el-icon-check"
          @click="$emit('check', selectedData)"
          v-if="selectMode"
        >
          确定选择
        </el-button>
        <el-button
          type="success"
          icon="el-icon-plus"
          v-permission="['video:add']"
          @click="add"
          v-else
        >
          新增视频
        </el-button>
        <el-button icon="el-icon-refresh" @click="$refs['videoSearchList'].getList()">
          刷新列表
        </el-button>
      </div>
    </search-list>
    <el-dialog
      :visible="dialogVisible"
      title="视频预览"
      center
      width="550px"
      @close="close"
      :destroy-on-close="true"
      :close-on-click-modal="true"
      :append-to-body="true"
    >
      <player v-if="vid" :videoId="vid" :width="width" :height="height"></player>
      <span v-else>没有找到相关视频</span>
    </el-dialog>
    <comment-dialog
      v-if="showCommentDialog"
      :item="commentItem"
      @close="showCommentDialog = false"
      @success="replySuccess"
    ></comment-dialog>
  </div>
</template>

<script>
  import CommentDialog from '../../components/CommentDialog.vue';

  import Player from 'comp/Player';
  export default {
    components: {
      Player,
      CommentDialog,
    },
    props: {
      selectMode: {
        type: Boolean,
        default: false,
      },
      defaultSearchOptions: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        selectedData: [],
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'courseId',
            label: '合集ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '合集标题',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'showVideoId',
            label: '视频ID',
          },
          // TODO:
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'categoryName',
            label: '分类',
          },
          {
            type: 'onlineSl',
            name: 'online',
            label: '上线状态',
          },
          {
            type: 'precisedSl',
            name: 'precised',
            label: '精编状态	',
          },
          {
            type: 'singleSl',
            name: 'single',
            label: '视频类型',
          },
          {
            type: 'paySl',
            name: 'payMode',
            label: '全部付费类型',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '讲师',
          },
        ],
        // 是否展示dialog
        dialogVisible: false,
        // 播放的视频id
        vid: '',
        // 视频播放器的宽高
        width: '500px',
        height: '500px',
        showCommentDialog: false,
        commentItem: {},
      };
    },
    methods: {
      rowClick(row) {
        if (this.selectMode) {
          this.$refs.videoSearchList.$refs['search-table'].toggleRowSelection(
            row,
            !this.selectedData.includes(row),
          );
        } else {
          this.$emit('single-select', row);
        }
      },
      /**
       * 传入默认的搜索参数
       */
      beforeQuery(val) {
        const { searchInfo } = val;
        for (const p in this.defaultSearchOptions) {
          searchInfo[p] = this.defaultSearchOptions[p];
        }
      },
      /**
       * 管理
       */
      check(row) {
        const { videoId } = row;
        this.$tabs.open({ name: 'VideoDetail', params: { id: videoId } });
      },
      // 预览
      show(row) {
        this.dialogVisible = true;
        this.vid = row.thirdVideoId;
      },
      // 预览关闭
      close() {
        this.dialogVisible = false;
        this.vid = '';
      },
      /**
       * 新增
       */
      add() {
        this.$tabs.open({ name: 'VideoUpload' });
        this.$emit('add');
      },
      /**
       * 删除
       */
      del(row) {
        this.$confirm('确认要删除这个视频吗?删了就没有了', '', {
          type: 'error',
        }).then((res) => {
          this.$service
            .AssetVideoDelete({
              videoId: row.videoId,
            })
            .then((res) => {
              this.$refs.videoSearchList.getList();
              this.$message.success('操作成功');
            });
        });
      },
      /**
       * 选择数据回调
       */
      selectionChange(val) {
        this.selectedData = [...val];
      },
      // 添加评论
      addComment(row) {
        this.showCommentDialog = !this.showCommentDialog;
        const { showVideoId, title } = row;
        this.$set(this, 'commentItem', { title, subjectId: showVideoId, subjectType: 0 });
      },
      replySuccess() {
        this.$refs.videoSearchList.getList();
      },
    },
  };
</script>

<style lang="less" scoped>
  .video {
    .video-cover {
      max-width: 200px;
      max-height: 300px;
    }

    /deep/ .el-table__row {
      cursor: pointer;
    }
  }
</style>
